<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <!-- http://ip:port/
    ${pageContext....Path}-->
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<h1 align="center">电子图书信息</h1>
<!--表单-->
<div class="layui-form">
    <div class="layui-form-item">
        <!--        图书分类-->
        <div class="layui-inline">
            <label class="layui-form-label">图书分类</label>
            <div class="layui-input-block" style="width: 350px;" >
                <select id="categoryId" name="categoryId" lay-filter="categoryId" >
                </select>
            </div>
        </div>
<!--        按钮-->
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="*">提交</button>
            </div>
        </div>
    </div>

</div>
<!--表格-->
<table id="demo" lay-filter="test"></table>
<!-- 行工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--头工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;

        // 调用ajax请求图书分类的信息
        $.ajax({
            url: "http://www.ebook.com/category/list",
            data: null,
            type: "GET",
            dataType: "JSON",
            success: function(result){
                if(result.code == 0){
                    // 成功获取数据
                    var content = "<option value=''>--请选择--</option>";
                    var jsonArray = result.data;
                    for (var i = 0; i < jsonArray.length; i++) {
                        content += "<option value='"+jsonArray[i].id+"'>"+jsonArray[i].name+"</option>";
                    }
                    // 将封装好的option标签插入到select中
                    $("#categoryId").html(content);
                    // 重新渲染当当前容器中全部的select
                    form.render('select');
                }else{
                    // 获取图书分类失败
                    layer.alert("获取图书分类失败!!");
                }
            },
            error: function(){
                layer.alert("服务器爆炸了!!");
            }
        })

        //第一个实例,渲染table
        var tableIns = table.render({
            elem: '#demo'
            ,toolbar: '#toolbarDemo'
            ,height: 'full-105'
            ,url: 'http://www.ebook.com/entry/list' //数据接口
            ,page: false //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '图书编号', sort: true, fixed: 'left'}
                ,{field: 'title', title: '图书名称'}
                ,{field: 'summary', title: '图书摘要'}
                ,{field: 'uploaduser', title: '上传人'}
                ,{field: 'createdate', title: '上传时间',templet: function(d){
                        var d = new Date(d.createdate);
                        var batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() +'日';
                        return batchDate;
                    }
                    }
                ,{field: '', title: '操作', toolbar: '#barDemo'}

            ]]
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.msg('删除操作');
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
               //1. 弹出层
                // 将5个值通过stroage传输到update页面
                layui.data('test',{key: "title",value: data.title});
                layui.data('test',{key: "id",value: data.id});
                layui.data('test',{key: "categoryId",value: data.categoryId});
                layui.data('test',{key: "summary",value: data.summary});
                layui.data('test',{key: "uploaduser",value: data.uploaduser});
                layui.data('test',{key: "createdate",value: data.createdate});
                layer.open({
                    type: 2
                    ,title :'修改电子图书信息'
                    ,content: 'http://www.ebook.com/ebookentry-update.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    ,area: ['500px', '662px']
                });
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title :'添加电子图书信息'
                        ,content: 'http://www.ebook.com/ebookentry-add.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        ,area: ['500px', '662px']
                    });
                    break;
            };
        });

        // 监听form表单的提交事件
        // 监听表单的提交事件
        form.on('submit(*)', function(data){
            // 让table重新加载,并且携带上表单的参数作为查询条件
            //1. 获取表单数据
            var formData = data.field;

            //2. 让table重新加载,并携带表单数据
            tableIns.reload({
                where: formData
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>